.person-card {
  &:hover {
    .person-name {
      background-position: 0 0;
    }
    .person-arrow {
      color: #fbfbfb;
    }
  }
  .person-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
  }
  .person-name {
    margin-block: 10px 20px;
    color: transparent;
    font-size: 1.25rem;
    background: linear-gradient(
      140deg,
      color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%) 0%,
      color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%) 15%,
      color-mix(
          in srgb,
          color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%),
          color-mix(in srgb, oklch(53.18% 0.28 296.97), white 70%) 50%
        )
        25%,
      color-mix(
          in srgb,
          color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%),
          color-mix(in srgb, oklch(53.18% 0.28 296.97), white 70%) 10%
        )
        35%,
      color-mix(
          in srgb,
          color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%),
          color-mix(in srgb, oklch(63.32% 0.24 31.68), white 60%) 50%
        )
        42%,
      color-mix(
          in srgb,
          color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%),
          color-mix(in srgb, oklch(63.32% 0.24 31.68), white 60%) 50%
        )
        44%,
      color-mix(
          in srgb,
          color-mix(in srgb, oklch(69.02% 0.277 332.77), white 70%),
          oklch(16.93% 0.004 285.95) 70%
        )
        47%,
      color-mix(in srgb, oklch(53.18% 0.28 296.97), white 70%) 48%,
      color-mix(in srgb, oklch(51.01% 0.274 263.83), white 60%) 60%
    );
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.8s ease-out;
  }
  .person-arrow {
    color: #888;
    transition: color 0.3s ease;
  }
}
